<template>
	<view class="container-root">
		<view v-if="billingData == null" class="empty-root">
			<image class='empty-image' src='/static/images/sigh.png'></image>
			<text>未查询到账单信息</text>
		</view>
		<view v-else class="bill-item-layer" v-for="(item,index) in billingData" hover-class="item-hover" hover-stay-time="50" :key='index' >
			<view class='bill-item-head'>
			    <view class='pay-type'>{{item.paytype}}</view>
			    <view class='money-format'>{{item.totalmoney}}</view>
			</view>	
			<view class='time-format'>
			      {{item.addtime}}
			</view>
		</view>		
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import httpRequest from '@/utils/utilHttp.js'
	
	export default {
		data() {
			return {
				billingData:null,
				timeString:''
			}
		},
		computed:{
			...mapState(['token', 'userInfo']), //对全局变量hasLogin进行监控
		},
		onShow()
		{
			uni.setNavigationBarTitle({
				title:"账单详情",
			})
			let self = this;
			var parms = {
			    userCode: self.userInfo.userCode,
			    token: self.token,
			}
			let options = {
				url:httpRequest.requestUrl.businessInfo_get,
				method:httpRequest.requestMethod.GET,
				datas:parms
			}
			httpRequest.Request(options).then(res => {
				//console.log(res)
				if (res.data.status == 200) {
					self.billingData = res.data.content;
					for (var i = 0; i < self.billingData.length; i++) {
						switch (self.billingData[i].paytype) {
							case '0':
								self.billingData[i].paytype = '现金支付'
								break;
							case '1':
								self.billingData[i].paytype = '余额支付'
								break;
							case '2':
								self.billingData[i].paytype = '积分支付'
								break;
							case '3':
								self.billingData[i].paytype = '其他支付'
								break;
						}
					}
					//console.log(self.billingData);
				}				
				else{
					uni.showToast({
					    title: "修改失败",
					    icon: "none"
					})
				}
			})
		},
		methods: {
			
		}
	}
</script>

<style>
	
	.bill-item-layer{
		width: calc(100% - 40rpx);
		padding: 0rpx 20rpx 0rpx 20rpx;
		background-color: white;
	}
	.bill-item-head{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0rpx 20rpx 0rpx;
	}
	.pay-type {
	  color: #333;
	}
	
	.money-format {
	  color: black;
	  font-size: 40rpx;
	}
	
	.time-format {
	  color: #999;
	  font-size: 24rpx;
	}
</style>
